<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>作业02 - QQ音乐</title>
    <link rel="stylesheet" href="styles/music.css" />
  </head>
  <body>
    <header>
      <div class="header-inner">
        <img src="imgs/qqmusic.png" />
      </div>
    </header>
    <main>
      <div class="grid-content">
        <div class="main-title">歌单推荐</div>
        <div class="tag-list">
          <a href="#" class="tag-item tag-active">为你推荐</a>
          <a href="#" class="tag-item">运动</a>
          <a href="#" class="tag-item">网络歌曲</a>
          <a href="#" class="tag-item">想念</a>
          <a href="#" class="tag-item">官方歌单</a>
          <a href="#" class="tag-item">情歌</a>
        </div>
        <div class="playlist">
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">播放量：820.5万</a>
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000kxqtN0ddCpU_1.jpg"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">说得到做得到</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">播放量：530.5万</a>
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001RNYYW0rHuPV_1.jpg"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">不在见</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">播放量：96.5万</a>
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002R4DOj26Q61A_1.jpg"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">长安车马慢</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">播放量：240.5万</a>
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003jwWjV32HJIL_1.jpg"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">纸鸢</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">播放量：98.5万</a>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-content">
        <div class="main-title">新歌首发</div>
        <span class="bofang">
          <img src="imgs/icon_play.png" />
          <span class="bofangtext">播放全部</span>
        </span>
        <div class="tag-list">
          <a href="#" class="tag-item tag-active">最新</a>
          <a href="#" class="tag-item">内地</a>
          <a href="#" class="tag-item">港台</a>
          <a href="#" class="tag-item">欧美</a>
          <a href="#" class="tag-item">韩国</a>
          <a href="#" class="tag-item">日本</a>
        </div>
        <div class="newlist">
          <div class="newlistcell">
            <a href="#" class="cover-wrap">
              <img
                class="pic"
                src="https://y.qq.com/music/photo_new/T002R300x300M000001wZakj4a55be_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <div>
                <a href="#" class="nowrap album-title">万毒不侵</a>
              </div>
              <div>
                <a href="#" class="nowrap album-author">张紫宁</a>
              </div>
            </div>
            <div class="nowrap album-time">03:16</div>
          </div>
          <div class="newlistcell">
            <a href="#" class="cover-wrap">
              <img
                class="pic"
                src="https://y.qq.com/music/photo_new/T002R300x300M000000KinXe3pQzov_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <div>
                <a href="#" class="nowrap album-title">不畏</a>
              </div>
              <div>
                <a href="#" class="nowrap album-author">熊梓淇</a>
              </div>
            </div>
            <div class="nowrap album-time">03:33</div>
          </div>
          <div class="newlistcell">
            <a href="#" class="cover-wrap">
              <img
                class="pic"
                src="https://y.qq.com/music/photo_new/T002R300x300M000002nmwkD1PJj0Q_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <div>
                <a href="#" class="nowrap album-title">春日</a>
              </div>
              <div>
                <a href="#" class="nowrap album-author">好妹妹</a>
              </div>
            </div>
            <div class="nowrap album-time">03:22</div>
          </div>
          <div class="newlistcell">
            <a href="#" class="cover-wrap">
              <img
                class="pic"
                src="https://y.qq.com/music/photo_new/T002R300x300M000002v6bjO3UyGB3_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <div>
                <a href="#" class="nowrap album-title">脱逃换骨</a>
              </div>
              <div>
                <a href="#" class="nowrap album-author">李荣浩</a>
              </div>
            </div>
            <div class="nowrap album-time">04:30</div>
          </div>
          <div class="newlistcell">
            <a href="#" class="cover-wrap">
              <img
                class="pic"
                src="https://y.qq.com/music/photo_new/T002R300x300M000001wZakj4a55be_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <div>
                <a href="#" class="nowrap album-title">万毒不侵</a>
              </div>
              <div>
                <a href="#" class="nowrap album-author">张紫宁</a>
              </div>
            </div>
            <div class="nowrap album-time">03:16</div>
          </div>
          <div class="newlistcell">
            <a href="#" class="cover-wrap">
              <img
                class="pic"
                src="https://y.qq.com/music/photo_new/T002R300x300M000001wZakj4a55be_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <div>
                <a href="#" class="nowrap album-title">万毒不侵</a>
              </div>
              <div>
                <a href="#" class="nowrap album-author">张紫宁</a>
              </div>
            </div>
            <div class="nowrap album-time">03:16</div>
          </div>
          <div class="newlistcell">
            <a href="#" class="cover-wrap">
              <img
                class="pic"
                src="https://y.qq.com/music/photo_new/T002R300x300M000001wZakj4a55be_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <div>
                <a href="#" class="nowrap album-title">万毒不侵</a>
              </div>
              <div>
                <a href="#" class="nowrap album-author">张紫宁</a>
              </div>
            </div>
            <div class="nowrap album-time">03:16</div>
          </div>
          <div class="newlistcell">
            <a href="#" class="cover-wrap">
              <img
                class="pic"
                src="https://y.qq.com/music/photo_new/T002R300x300M000001wZakj4a55be_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <div>
                <a href="#" class="nowrap album-title">万毒不侵</a>
              </div>
              <div>
                <a href="#" class="nowrap album-author">张紫宁</a>
              </div>
            </div>
            <div class="nowrap album-time">03:16</div>
          </div>
          <div class="newlistcell">
            <a href="#" class="cover-wrap">
              <img
                class="pic"
                src="https://y.qq.com/music/photo_new/T002R300x300M000001wZakj4a55be_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <div>
                <a href="#" class="nowrap album-title">万毒不侵</a>
              </div>
              <div>
                <a href="#" class="nowrap album-author">张紫宁</a>
              </div>
            </div>
            <div class="nowrap album-time">03:16</div>
          </div>
        </div>
      </div>
      <div class="grid-content">
        <div class="main-title">MV</div>
        <div class="tag-list">
          <a href="#" class="tag-item tag-active">精选</a>
          <a href="#" class="tag-item">内地</a>
          <a href="#" class="tag-item">韩国</a>
          <a href="#" class="tag-item">港台</a>
          <a href="#" class="tag-item">欧美</a>
          <a href="#" class="tag-item">日本</a>
        </div>
        <div class="playlist">
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M1010043cTpz0XdKra.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《幼稚未完》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">林峯</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              <span>1591</span>
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M000003pzxLs2HpYri.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《流浪人生》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">ICE</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              9702
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M102001FDb6E1TzWXG.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《不合时宜的浪漫》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">郑兴/大象体操</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              2748
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M000003zCG4t2qCCA4.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《Attention》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">Omah Lay / Justin</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              12.2万
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M0000033U5VO4QEwV2.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《重新选择》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">陈立农</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              34.8万
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M0000033U5VO4QEwV2.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《重新选择》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">陈立农</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              34.8万
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M0000033U5VO4QEwV2.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《重新选择》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">陈立农</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              34.8万
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M0000033U5VO4QEwV2.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《重新选择》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">陈立农</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              34.8万
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M0000033U5VO4QEwV2.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《重新选择》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">陈立农</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              34.8万
            </div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M0000033U5VO4QEwV2.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">《重新选择》</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">陈立农</a>
            </div>
            <div class="nowrap album-time">
              <span><img src="imgs/icon_listen.png" /></span>
              34.8万
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer></footer>
  </body>
</html>
